<template>
  <div class="mine-wrap">
    <el-menu
        :default-active="activeTab"
        class="mine-menu"
        :ellipsis="false"
        @select="handleSelect"
    >
      <el-menu-item index="recently" class="right-text">最近操作</el-menu-item>
      <el-menu-item index="myUpload" class="right-text">
        我的上传
      </el-menu-item>
      <el-menu-item index="myDownload" class="right-text">
        我的下载
      </el-menu-item>
      <el-menu-item index="myCollect" class="right-text">
        我的收藏
      </el-menu-item>
    </el-menu>
    <div class="content">
      <Transition name="mine" mode="out-in">
        <component :is="currentComponent"></component>
      </Transition>
    </div>
  </div>
</template>
<script>
import Recently from '@/components/homeShareSpace/mine/Recently.vue'
import MyCollect from '@/components/homeShareSpace/mine/MyCollect.vue'
import MyDownload from '@/components/homeShareSpace/mine/MyDownload.vue'
import MyUpload from '@/components/homeShareSpace/mine/MyUpload.vue'

import {ref} from "vue";

export default {
  components: {
    Recently,
    MyCollect,
    MyDownload,
    MyUpload,
  },
  setup() {

    const activeTab = ref('recently')
    const squareUrl = ref('') // 空间图片
    const currentComponent = ref('Recently')

    return {
      activeTab,
      squareUrl,
      currentComponent
    }
  },
  methods: {
    handleSelect(tab) {
      switch (tab) {
        case 'recently':
          this.currentComponent = 'Recently'
          break
        case 'myUpload':
          this.currentComponent = 'MyUpload'
          break
        case 'myDownload':
          this.currentComponent = 'MyDownload'
          break
        case 'myCollect':
          this.currentComponent = 'MyCollect'
          break
        default:
          this.currentComponent = 'Recently'
          break
      }
    }
  }
};
</script>
<style scoped>
.mine-wrap {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  border-top: 1px solid rgba(233, 233, 233, 1);
}

.mine-menu {
  width: 10%;
}

.content {
  width: 90%;
}

.is-active {
  color: #00A298;
}

/*.mine-enter-active {*/
/*  transition: all 0.5s ease-in;*/
/*}*/

/*.mine-leave-active {*/
/*  transition: all 0s;*/

/*}*/

/*.mine-enter-from,*/
/*.mine-leave-to {*/
/*  opacity: 0;*/
/*  transform: translateX(3rem);*/
/*}*/
</style>
